<template>
  <a-modal title="编辑委员" :visible="editVisible" @ok="handleSave" @cancel="handleClose">
    <a-alert class="card" message="“是否硕导”和“是否博导”只能选择一项填写" type="info" />
    <a-form :form="form">
      <a-row :gutter="48">
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <!-- <a-form-item label="姓名">
            <a-input v-decorator="[
                'xm',
                {
                  rules: [{ required: true, message: '请输入姓名！' }]
                }
              ]" placeholder="请输入..." />
          </a-form-item> -->
          <a-form-item label="姓名">
            <a-select v-decorator="[
                'index',
                {
                  rules: [{ required: true, message: '请选择职称' }]
                }
              ]" 
              placeholder="输入姓名搜索"
              @search="fetchWy"
              @change="wyChange"
              :notFoundContent="wyList.fetching ? undefined : null"
              showSearch optionFilterProp="children">

              <!-- @search="fetchWy"
              @change="wyChange" -->
              <a-spin v-if="wyList.fetching" slot="notFoundContent" size="small"/>
              <a-select-option v-for="(i, index) in wyList.list" :key="i.id" :value="index">{{i.xm}}</a-select-option>
              <!-- <a-select-option v-for="i in TYPE0342" :key="i.id" :value="i.code">{{ i.name }}</a-select-option> -->
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="职称">
            <a-select v-decorator="[
                'zcm',
                {
                  rules: [{ required: true, message: '请选择职称' }]
                }
              ]" :allowClear="true" disabled showSearch optionFilterProp="children">
              <a-select-option v-for="i in TYPE0342" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="是否校外">
            <a-select v-decorator="[
                'sfxwry',
                {
                  rules: [{ required: true, message: '请选择是否校外' }]
                }
              ]" :allowClear="true" disabled showSearch optionFilterProp="children">
              <a-select-option v-for="i in TYPE0065" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="工作单位">
            <a-input v-decorator="[
                'gzdw',
                {
                  rules: [{ required: true, message: '请输入工作单位！' }]
                }
              ]" disabled placeholder="请输入..." />
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="是否博导">
            <a-select v-decorator="[
                'sfbd',
                {
                  rules: [{ required: false }],
                  validateTrigger: 'onSubmit'
                }
              ]" :allowClear="true" @change="e => sdOrBd = e === undefined ? '' : 'bd'" disabled showSearch optionFilterProp="children">
              <a-select-option v-for="i in TYPE0065" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="是否硕导">
            <a-select v-decorator="[
                'sfsd',
                {
                  rules: [{ required: false }],
                  validateTrigger: 'onSubmit'
                }
              ]" :allowClear="true" @change="e => sdOrBd = e === undefined ? '' : 'sd'" disabled showSearch optionFilterProp="children">
              <a-select-option v-for="i in TYPE0065" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="成员类型">
            <a-select @change="cylxChange" v-decorator="[
                'cylxm',
                {
                  rules: [{ required: true, message: '请选择成员类型' }]
                }
              ]" :allowClear="true" showSearch optionFilterProp="children">
              <a-select-option v-for="i in TYPE0372" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col v-if="cylxm === '02'" :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="排序">
            <a-input-number :min="1" :max="99" v-decorator="[
                'sort'
              ]" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
import { mapState } from 'vuex'
import { debounce } from 'utils/common'

export default {
  props: {
    editVisible: {
      default: false
    },
    data: {
      default: function() {
        return {
          xm: '',
          zcm: '',
          sfxwry: '',
          gzdw: '',
          sfbd: '',
          cylxm: '',
          sort:''
        }
      }
    }
  },
  inject: ['app'],
  data() {
    return {
      form: this.$form.createForm(this),
      cylxm: '',
      sdOrBd: '', //选择是否硕导还是选择是否博导
      wyList: { // 大学毕业专业下拉
        list: [],
        fetching: false
      }
    }
  },
  watch: {
    data: {
      handler: function(val) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            xm: val.xm,
            zcm: val.zcm || '',
            sfxwry: val.sfxwry || '',
            gzdw: val.gzdw || '',
            sfbd: val.sfbd || '',
            sfsd: val.sfsd || '',
            cylxm: val.cylxm || '',
            sort:val.sort || '',
            index: val.xm
          })
          this.cylxm = val.cylxm
          this.wyList.list = []
          if(val.xm) {
            this.fetchWy(val.xm)
          }
          if (val.sfbd) {
            this.sdOrBd = 'bd'
          } else if (val.sfsd) {
            this.sdOrBd = 'sd'
          } else {
            this.sdOrBd = ''
          }
        })
      },
      immediate: true
    }
  },
  computed: {
    ...mapState({
      TYPE0372: state => state.app['TYPE0372'], // 成员类型
      TYPE0065: state => state.app['TYPE0065'], // 是否校外人员  是否博导
      TYPE0342: state => state.app['TYPE0342'] // 职称
    })
  },
  // created () {
  //   this.fetchWy()
  // },
  methods: {
    cylxChange(code) {
      this.cylxm = code
    },
    handleSave() {
      this.form.validateFields(
        (err, values) => {
          if (!err) {
            values.sort = values.cylxm === '01' ? 1 : (values.cylxm === '03' ? 100 : values.sort)
            let params = Object.assign({}, this.data, values)
            params.sfbdmc = values.sfbd ? this.TYPE0065.find(e=>e.code==values.sfbd).name : ''
            params.sfsdmc = values.sfsd ? this.TYPE0065.find(e=>e.code==values.sfsd).name : ''
            params.sfxwrymc = this.TYPE0065.find(e=>e.code==values.sfxwry).name
            params.zcmmc = this.TYPE0342.find(e=>e.code==values.zcm).name
            params.cylxmc = this.TYPE0372.find(e=>e.code==values.cylxm).name,
            params.xm = this.wyList.list[values.index].xm
            this.$emit('success', params)
          }
        },
      );
    },
    fetchWy: debounce(async function (value) {
      if(value){
        this.wyList.fetching = true
        const params = {xm: value}
        // console.log(this.app.selectYxConfig)
        if(this.app.selectYxConfig.length === 1) {
          params.ssyxm = this.app.selectYxConfig[0].dwh
        }
        let { data } = await this.$api.degree.pleaWyAll(params)
        this.wyList.list = data
        this.wyList.list.sort((a,b) => a.xm.replace(/\s*/g,"").localeCompare(b.xm.replace(/\s*/g,""), 'zh-CN'))
        // localeCompare
        // console.log(this.wyList.list)
        this.wyList.fetching = false
      }
    }, 500),
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    wyChange (index) {
      this.form.setFieldsValue( this.wyList.list[index] )
    },
    handleClose() {
      this.$emit('close')
    }
  }
}

</script>
